<template>
    <div style="width: 100%;">
        <h1 style="padding-left: 30px;">新增班级</h1>
        <div style="width: 100%;display:flex;align-items: center; justify-content: center;">
            <label style="font-size: 17px;">班级名称:</label>
            <el-input v-model="inputClassName" clearable style="width: 200px;margin-left: 20px;"></el-input>
            <el-button type="success" style="margin-left: 30px;" @click="submitAdd"> 提交</el-button>
        </div>
        <h1 style="padding-left: 30px;">查询班级</h1>
        <div style="width: 100%;display:flex; flex-direction: column;align-items: center; margin-top: 30px;">
            <el-table :data="tableData" border style="width: 70%;" fixed stripe>
                <el-table-column prop="classNum" label="班级编号" />
                <el-table-column prop="className" label="班级名称" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                        <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next,jumper" :current-page="current" :page-size="pageSize"
                :total="pageTotal" @current-change="currentChange" hide-on-single-page style="margin-top: 20px;" />
        </div>


        <el-dialog v-model="visible" :show-close="false" width="500">
            <template #header="{ close, titleId, titleClass }">
                <div style="width: 100%;">
                    <div style="display: flex;justify-content: center;flex-direction: column;">
                        <div style="flex-wrap:1;display: flex;justify-content: center;">
                            <label>班级编号:</label>
                            <el-input disabled v-model="editClassNum"
                                style="width: 150px;margin-left: 30px;"></el-input>
                        </div>
                        <div style="flex-wrap:1;display: flex;justify-content: center; margin-top: 30px;">
                            <label>班级名称:</label>
                            <el-input v-model="editClassName" style="width: 150px;margin-left: 30px;"></el-input>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: center;margin-top: 50px;">
                        <el-button type="primary" @click="close">
                            取消
                        </el-button>
                        <el-button type="success" @click="submitEdit" style="margin-left: 100px;">
                            提交
                        </el-button>
                    </div>

                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script lang="ts" setup>
    import axios from '../utils/http';
    import { ElMessage } from 'element-plus';
    import { onMounted, ref, } from 'vue';

    const inputClassName = ref('');

    const tableData = ref([])

    const pageTotal = ref(0)
    const pageSize = ref(10)

    const visible = ref(false)  // 控制编辑弹框显示
    const editClassNum = ref(0)
    const editClassName = ref('')

    const current = ref(1);


    const currentChange = (val) => {
        current.value = val;
        selectPage();
    }

    const submitAdd = () => {
        if (inputClassName.value == '') {
            ElMessage({
                message: '请输入班级名称',
                type: 'warning',
            })
            return;
        }
        axios.put("/classc/add/" + inputClassName.value).then(res => {
            if (res.code != 500) {
                ElMessage({
                    message: '提交成功',
                    type: 'success',
                })
                selectPage();
            }
        });
    }

    const handleEdit = (index : number, row) => {
        visible.value = true;
        editClassNum.value = tableData.value[index].classNum;
        editClassName.value = tableData.value[index].className;
    }

    const submitEdit = () => {
        axios.post("/classc/edit", { classNum: editClassNum.value, className: editClassName.value })
            .then(res => {
                if (res.code == 200) {
                    visible.value = false;
                    ElMessage({
                        message: '编辑成功',
                        type: 'success'
                    })
                    tableData.value.forEach(d => {
                        if (d.classNum == editClassNum.value) {
                            d.className = editClassName.value;
                        }
                    });
                }
            })
    }

    const handleDelete = (index : number, row) => {
        axios.delete("/classc/del/" + tableData.value[index].classNum).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                tableData.value.splice(index, 1);
            }
        })

        console.log('handleDelete', tableData.value)
    }

    const selectPage = () => {
        axios.post("/classc/page", { current: current.value, size: pageSize.value })
            .then(res => {
                tableData.value = res.data.records;
                pageTotal.value = res.data.total;
                // console.log('tableData.value', tableData.value)
            })
    }

    onMounted(() => {
        selectPage();
    });
</script>

<style>
    .el-table .cell {
        width: 100%;
    }
</style>